<!DOCTYPE html>
<html>
<head>
	<title>商品详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="../css/style.css">
	<link type="text/css" rel="stylesheet" href="../css/flexslider.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../layer/layer.js"></script>
	<script type="text/javascript" src="../js/cart.js"></script>
	<script type="text/javascript" src="../js/cart.js"></script>
	<script type="text/javascript" src="../js/auth.js"></script>
	<script type="text/javascript" src="../js/CookieShop.js"></script>
</head>
<body>
<!--header-->
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand"><a href="./index"></a></h1>
            </div>
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="./index.html" class="active">首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">商品分类<b class="caret"></b></a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>商品分类</h4>
                                        <ul class="multi-column-dropdown" id="goodsTypeMenu">
                                            <li><a class="list" href="./goods_list.html">全部系列</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="./goodsrecommend_list.html?recommendTypeId=2" id="hotListMenu">热销</a></li>
                    <li><a href="./goodsrecommend_list.html?recommendTypeId=3" id="newListMenu">新品</a></li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
                <div class="search">
                    <form class="navbar-form" action="./goods_search.html">
                        <input type="text" class="form-control" name="keyword">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">搜索</button>
                    </form>
                </div>
            </div>

            <div class="header-right cart">
                <a href="./goods_cart.html">
                    <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"><span class="card_num">0</span></span>
                </a>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
	<!--//header-->
	<!--//single-page-->
	<div class="single">
		<div class="container">
			<div class="single-grids">
				<div class="col-md-4 single-grid">
				    <input type="hidden" id="id">
					<div class="flexslider">

						<ul class="slides">
							<li>
								<div class="thumb-image" id="coverCanvas"></div>
							</li>
							<li>
								 <div class="thumb-image" id="image1Canvas"></div>
							</li>
							<li>
							   <div class="thumb-image" id="image2Canvas"></div>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-4 single-grid simpleCart_shelfItem">
					<h3 id="name"></h3>
					<div class="tag">
						<p>分类 : <a href="./goods_list.html?goodsTypeId=" id="typeName"></a></p>
					</div>
					<p id="intro"></p>
					<div class="galry">
						<div class="prices">
							<h5 class="price" id="price"></h5>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="btn_form">
						<a href="javascript:;" class="add-cart item_add" onclick="mybuy()">加入购物车</a>
					</div>
				</div>
				<div class="col-md-4 single-grid1">
					<!-- <h2>商品分类</h2> -->
					<ul id="goodsTypeMenu2">
                        <li><a  href="./goods_list.html">全部系列</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--footer-->
	<div class="footer">
        <div class="container">
            <div class="text-center">

            </div>
        </div>
    </div>
	<!--//footer-->
</body>
<script type="text/javascript">
var id = 0;
var translateGoodsTypes = [];
$(document).ready(function(){
  translateGoodsTypes = translateListActiveGoodsTypes();
  countMyCart();
  genGoodsTypesMenu();
  genGoodsTypesMenu2();
  decorateMainMenu();
  var params = new URLSearchParams(window.location.search);
  var idStr = params.get("id");
  if (isBlank(idStr)) id = 0;
  else id = parseInt(idStr);
  var goods = findGoodsById(id);
  decoratePage(goods);
  $('.flexslider').flexslider({
		animation: "slide",
		controlNav: "thumbnails"
	  });
});
function findGoodsById(id){
	var retVal = {};
	$.ajax({
		type:"post",
		url: "../controller/goodsController/findGoodsById",
		data: {
			id:id
		},
		dataType: 'json',
		async:false,
		success: function(data, textStatus) {
			debugger;
			if ( data.rows !=null ){
				retVal = data.rows;
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
	return retVal;
}

function showScrollImage(img){
	if(img){
		return "<img src=\"data:image/png;base64,"+img+"\" data-imagezoom=\"true\" class=\"img-responsive\">";"data:image/png;base64,"+img;
	} else {
		return "<img src=\"../images/blank.jpg\" data-imagezoom=\"true\" class=\"img-responsive\">";
	}
}

function decoratePage(goods){
  $("#id").val(goods.id);
  $("#name").text(goods.name);
  $("#typeName").text(translateGoodsType(goods.goodsTypeId));
  $("#price").text(goods.price);
  $("#intro").text(goods.intro);
  $("#coverCanvas").html(showScrollImage(goods.cover));
  $("#image1Canvas").html(showScrollImage(goods.image1));
  $("#image2Canvas").html(showScrollImage(goods.image2));
}

function translateGoodsType(value){
	if (isBlank(value) || parseInt(value) <= 0) return "";
	var retVal = value;
	if (translateGoodsTypes != null && translateGoodsTypes != undefined && translateGoodsTypes.length > 0){
		for(var i=0;i<translateGoodsTypes.length;i++){
			if (translateGoodsTypes[i].id == value) return translateGoodsTypes[i].name;
		}
	}
	return retVal;
}

function translateListActiveGoodsTypes(value){
	var retVal = [];
	$.ajax({
		type:"post",
		url: "../controller/goodsTypeController/listActiveGoodsTypes",
		data: {
			id:value
		},
		dataType: 'json',
		async:false,
		success: function(data, textStatus) {
			debugger;
			if ( data.rows !=null ){
				retVal = data.rows;
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});
	return retVal;
}

function genGoodsTypesMenu2(){
  $.ajax({
		type:"post",
		url: "../custcontroller/goodsTypeCustController/listActiveGoodsTypes",
		dataType: 'json',
		success: function(data, textStatus) {
			debugger;
			if ( data.rows !=null ){
			   for (let i=0;i<data.rows.length;i++){
				  appendGoodsTypeRow2(data.rows[i]);
				}
			}
		},
		complete : function(XMLHttpRequest, textStatus) {
		},
		error : function(XMLHttpRequest,textStatus,errorThrown) {
			alert("Error:"+textStatus);
			alert(errorThrown.toString());
		}
	});

}

function appendGoodsTypeRow2(row){
  var rowStr =	"<li><a class=\"list\" href=\"goods_list.html?goodsTypeId="+row.id+"\">"+row.name+"</a></li>\n";
  $("#goodsTypeMenu2").append(rowStr);
}

function mybuy(){
  var id = parseInt($("#id").val());
  buy(id,1);
}
</script>
</html>
